<div class="container">
  <div class="header-wrapper">
    <img [src]="foods.image"/>
    <div class="btn-close" (click)="onClose()"><span class="iconfont icon-left-jf"></span></div>
    <div class="content">
      <h1 class="title">{{foods.name}}</h1>
      <div class="detail">
        <span class="sellCount">月销{{foods.sellCount}}</span>
        <span class="rating">好评率{{foods.rating}}%</span>
      </div>
      <div class="price">￥{{foods.price}}</div>
      <div class="add-cart" *ngIf="!isAddCart" (click)="onAddCart($event)">加入购物车</div>
      <div class="add-btn" *ngIf="isAddCart">
        <span class="iconfont icon-jian1" (click)="onDecrease($event)"></span>
        <span class="">1</span>
        <span class="iconfont icon-add-sy" (click)="onIncrease($event)"></span>
      </div>
    </div>
  </div>
  <div *ngIf="foods.info!=''">
    <div class="split"></div>
    <div class="content-wrapper">
      <h1 class="title">商品信息</h1>
      <div class="text">{{foods.info}}</div>
    </div>
  </div>
  <div class="split"></div>
  <div class="satisfaction">
    <div  class="btns">
      <div (click)="onSatisfy(0,$event)" class="active inline-block btn positive">全部{{$any(foods.ratings).length}}</div>
      <div (click)="onSatisfy(1,$event)" class="inline-block btn positive">满意{{$any(satRatings).length}}</div>
      <div (click)="onSatisfy(2,$event)" class="inline-block btn negative">不满意{{$any(NotSatRatings).length}}</div>
    </div>
    <div class="checkbox">
      <span class="iconfont icon-zhengque" [ngClass]="{'on': isChecked}" (click)="onChecked()"></span>
      <span class="title">只看有评价的内容</span>
    </div>
  </div>
  <div class="rating-wrapper">
    <ul>
      <li *ngFor="let rating of ratingsArr">
        <div  *ngIf="isChecked==true?rating.text!='':true" class="rating-item">
          <div class="rate-time">
            {{rating.rateTime | date:'yyyy-MM-dd HH:mm:ss'}}
            <span class="name">{{rating.username}}</span>
            <img [src]="rating.avatar" class="avatar"/>
          </div>
          <div class="text"><span class="iconfont icon-zan1" *ngIf="rating.rateType == 0"></span>{{rating.text}}</div>
        </div>
      </li>
    </ul>
  </div>
</div>
